12 - Les variables CSS

Créer et utiliser une variable CSS

Les variables CSS permettent d'éviter de répéter une valeur utilisée plusieurs fois dans le fichier CSS (comme une couleur par exemple).

Dans le fichier CSS, on créé ces variables en sélectionnant le pseudo-élément ":root", ce qui permet de les rendre accessible depuis tous les éléments HTML de la page.

            

                /* Création d'une variable */
                :root{
                    --main-theme-color: #880000;
                }

                /* Utilisation de la variable sur diverses propriétés */
                h1{
                    color: var(--main-theme-color);
                }

                h2{
                    color: var(--main-theme-color);
                }

                p{
                    background-color: var(--main-theme-color);
                }